<template>
  <div class="payment pay">
    <van-nav-bar
      title="支付"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <div class="ctxPay">
      <div data-v-74bbaf8a="">
        <img data-v-74bbaf8a="" :src="payInfo.qrcode" alt="" />
      </div>
      <div class="pricePay">￥{{ payInfo.allFee | fMoney }}</div>
    </div>
    <div class="context">
      <div class="collectPay">
        <div class="leftPay">收款方</div>
        <div class="rightPay">天堂电子商务有限公司</div>
      </div>
      <div class="collectPay">
        <div class="leftPay">剩余支付时间</div>
        <div class="rightPay">
          <van-count-down @finish="finish" :time="time" format="mm 分 ss 秒" />
        </div>
      </div>
    </div>
  </div>
</template> 

<script>
import $http from "@/utils/http";
export default {
  data() {
    return {
      timer: null,
      // 支付信息
      payInfo: {
        // 总金额
        allFee: "",
        // 创建时间
        createTime: "",
        // 订单编号
        orderId: "",
        // 支付二维码
        qrcode: "",
      },
    };
  },

  computed: {
    // 根据createTime计算出剩余时间
    time() {
      // 总时间(15分)
      let allTime = 15 * 60 * 1000;
      // 从创建时间到现在过去了多久
      let passTime = Date.now() - this.payInfo.createTime;
      // 剩余时间
      let time = allTime - passTime;
      return time;
    },
  },

  created() {
    // 接收参数
    this.payInfo = this.$route.query;
    this.getPayResult();
  },

  // 组件销毁的时候清除定时器
  destroyed() {
    clearInterval(this.timer);
  },

  methods: {
    // 通过轮询获取支付结果
    getPayResult() {
      // 定时调用接口
      this.timer = setInterval(() => {
        let params = {
          orderId: this.payInfo.orderId,
        };
        $http
          .get("http://huruqing.cn:3003/order/detail", { params })
          .then((res) => {
            console.log(res.result.orderStatus);
            if (res.result.orderStatus === "01") {
              clearInterval(timer);
              this.$router.push("/");
            }
          });
      }, 1000);
    },

    finish() {
      this.$router.push("/");
    },
  },
};
</script>



<style lang="less">
@import "./pay.less";
</style>